<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>组件颜色主题</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义组件颜色</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>Number, String</view>
				<view>circle</view>
				<view>滑块圆角，可带单位，circle圆形，square方形</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>md</view>
				<view>预定义尺寸</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>String</view>
				<view>无</view>
				<view>组件高，需带单位</view>
			</view>
			<view class="tr">
				<view>barHeight</view>
				<view>String</view>
				<view>无</view>
				<view>进度条高，需带单位</view>
			</view>
			<view class="tr">
				<view>buttonWidth</view>
				<view>String</view>
				<view>无</view>
				<view>自定义滑块宽度，需带单位</view>
			</view>
			<view class="tr">
				<view>buttonHeight</view>
				<view>String</view>
				<view>无</view>
				<view>自定义滑块高度，需带单位</view>
			</view>
			<view class="tr">
				<view>buttonBorderWidth</view>
				<view>Number, String</view>
				<view>1</view>
				<view>滑块边框宽度，单位固定为px</view>
			</view>
			<view class="tr">
				<view>alwayAct</view>
				<view>Boolean</view>
				<view>false</view>
				<view>滑块边框一直显示激活色</view>
			</view>
			<view class="tr">
				<view>range</view>
				<view>Boolean</view>
				<view>false</view>
				<view>开启选区</view>
			</view>
			<view class="tr">
				<view>min</view>
				<view>Number</view>
				<view>0</view>
				<view>最小值</view>
			</view>
			<view class="tr">
				<view>max</view>
				<view>Number</view>
				<view>0</view>
				<view>最大值</view>
			</view>
			<view class="tr">
				<view>decimals</view>
				<view>Number</view>
				<view>0</view>
				<view>固定显示小数位</view>
			</view>
			<view class="tr">
				<view>step</view>
				<view>Number</view>
				<view>1</view>
				<view>步阶</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>Number,Array</view>
				<view>0</view>
				<view>初始值，开启选区后应传入数组</view>
			</view>
			<view class="tr">
				<view>tips</view>
				<view>Boolean, String</view>
				<view>true</view>
				<view>显示当前数值，true为水平两端显示，float为浮动显示</view>
			</view>
			<view class="tr">
				<view>tipSpace</view>
				<view>Boolean</view>
				<view>false</view>
				<view>浮动显示数值时，是否撑高组件</view>
			</view>
			<view class="tr">
				<view>minTipClass</view>
				<view>String</view>
				<view>无</view>
				<view>显示数值时，最小值文字框的样式类名，仅对全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>maxTipClass</view>
				<view>String</view>
				<view>无</view>
				<view>显示数值时，最大值文字框的样式类名，仅对全局样式或穿透样式有效</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>组件禁用</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>组件只读</view>
			</view>
			<view class="tr">
				<view>unit</view>
				<view>String</view>
				<view>无</view>
				<view>内置单位文字</view>
			</view>
			<view class="tr">
				<view>refreshWatcher</view>
				<view>any</view>
				<view>无</view>
				<view>刷新触发器。值变更时触发按钮宽高、进度条宽度刷新</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view>	</view>
				<view>值改变事件，提交当前值。开启选区时提交格式为小值与大值的数组</view>
			</view>
			<view class="tr">
				<view>@changing</view>
				<view>事件</view>
				<view>	</view>
				<view>滑块滑动中事件，提交当前值。开启选区时提交格式为小值与大值的数组</view>
			</view>
			<view class="tr">
				<view>@input</view>
				<view>事件</view>
				<view>	</view>
				<view>同change，用于model</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{"&lt;vi-slider :value='数值'>&lt;/vi-slider>"}}
				<view class="">
					开启选区时，value为数组
				</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="50"></vi-slider>
				<view class="fbox">默认主题色</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="50" type="second"></vi-slider>
				<view class="fbox">第二主题色 type=second</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="50" type="third"></vi-slider>
				<view class="fbox">第三主题色 type=third</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="50" type="fourth"></vi-slider>
				<view class="fbox">第四主题色 type=fourth</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="50" type="fifth"></vi-slider>
				<view class="fbox">第五主题色 type=fifth</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="50" color="#ffc0b0"></vi-slider>
				<view class="fbox">自定义色 color=#ffc0b0</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="[20, 80]" range></vi-slider>
				<view class="fbox">开启选区 range=true</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="[20, 80]" range :decimals="1"></vi-slider>
				<view class="fbox">固定小数位 decimals=1</view>
			</view>
		</view>
		<view class="p-sm mt-md">
			<view class="py-sm">
				<vi-slider :value="20" size="sm"></vi-slider>
				<view class="fbox">小尺寸 size=sm</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="40" size="md"></vi-slider>
				<view class="fbox">中尺寸 size=md</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="60" size="lg"></vi-slider>
				<view class="fbox">大尺寸 size=lg</view>
			</view>
		</view>
		<view class="p-sm mt-md">
			<view class="py-sm">
				<vi-slider :value="50" alwayAct></vi-slider>
				<view class="fbox">滑块一直激活显示 alwayAct=true</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="50" alwayAct :buttonBorderWidth="3"></vi-slider>
				<view class="fbox">更改边框大小 buttonBorderWidth=3</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="50" radius="1px"></vi-slider>
				<view class="fbox">自定圆角 radius=1px</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="50" buttonWidth="1em"></vi-slider>
				<view class="fbox">自定滑块大小 buttonWidth=1em</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="50" buttonWidth="1.5em" buttonHeight="0.8em"></vi-slider>
				<view class="fbox">
					自定滑块大小<br>radius=3px<br>buttonWidth=1.5em<br>buttonHeight=0.8em
				</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="[20, 80]" radius="5px" range>
					<view slot="left" class="iconfont icon-arr-left"></view>
					<view slot="right" class="iconfont icon-arr-right"></view>
				</vi-slider>
				<view class="fbox">滑块内容 使用slot，left和right</view>
				文字颜色待修理
			</view>
		</view>
		<view class="p-sm mt-md">
			<view class="py-sm">
				<vi-slider :value="50" :tips="false"></vi-slider>
				<view class="fbox">关闭数值 tips=false</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="50" tips="float"></vi-slider>
				<view class="fbox">浮动数值 tips=float</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="50" tips="float" tipSpace></vi-slider>
				<view class="fbox">浮动数值占位 tipSpace=true</view>
			</view>
		</view>
		<view class="p-sm mt-md">
			<view class="py-sm">
				<vi-slider :value="[20, 80]" range disabled></vi-slider>
				<view class="fbox">禁用 disabled=true</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="[20, 80]" radius="5px" range disabled>
					<view slot="left" class="iconfont icon-arr-left"></view>
					<view slot="right" class="iconfont icon-arr-right"></view>
				</vi-slider>
				<view class="fbox">禁用</view>
			</view>
			<view class="py-sm">
				<vi-slider :value="[20, 80]" range readOnly></vi-slider>
				<view class="fbox">只读 readOnly=true</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
